<template>
  <div>
    <el-button type="danger" @click="addFirst({ type: 'category_first_edit' })"
      >添加一级分类</el-button
    >
    <hr style="margin-left:-30px; margin-right: -30px;" />
    <div>
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="category-wrap">
            <div class="category" v-for="firstItem in category.item" :key="firstItem.id">
              <h4>
                <svg-icon icon="plus"></svg-icon>
                {{ firstItem.category_name }}
                <div class="button-group">
                  <el-button
                    size="mini"
                    type="danger"
                    round
                    @click="editCategory({ data: firstItem, type: 'category_first_edit' })"
                    >编辑</el-button
                  >
                  <el-button size="mini" type="success" round>添加子级</el-button>
                  <el-button size="mini" round @click="deleteCategory(firstItem.id)"
                    >删除</el-button
                  >
                </div>
              </h4>
              <ul v-if="firstItem.children">
                <li v-for="childrenItem in firstItem.children" :key="childrenItem.id">
                  {{ childrenItem.category_name }}
                  <div class="button-group">
                    <el-button size="mini" type="danger" round>编辑</el-button>
                    <el-button size="mini" round @click="deleteCategory(childrenItem.id)"
                      >删除</el-button
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <h4 class="menu-title">一级分类名称</h4>
          <el-form label-width="100px" class="from-rap" :model="form" ref="categoryForm">
            <el-form-item label="一级分类名称: " v-if="category_first">
              <el-input
                v-model="form.categoryName"
                :disabled="category_first_disabled"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="二级分类名称: " v-if="category_sec">
              <el-input
                v-model="form.secCategoryName"
                :disabled="category_sec_disabled"
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="submit"
                :loading="submit_button_loading"
                :disabled="submit_button_disabled"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from "@vue/composition-api";
import { AddFirstCategory, GetCategory, DeleteCategory, EditCategory } from "../../api/article";
import { useConfirm, useCategory } from "../../utils/composition-function";

export default {
  setup(props, { root, refs }) {
    console.log("refs:", refs);
    const { confirm } = useConfirm();
    const { category } = useCategory();
    /** === === === === === === data === === === === === ===*/
    //#region
    const form = reactive({
      categoryName: "",
      // ↓二级
      secCategoryName: ""
    });
    const submit_button_type = ref("");
    const submit_button_disabled = ref(true);
    const category_first_disabled = ref(true);
    const category_sec_disabled = ref(true);
    const submit_button_loading = ref(true);
    const category_first = ref(true);
    const category_sec = ref(true);
    // const category = ref({
    //   item: [
    //     {
    //       id: "1",
    //       category_name: "国际信息",
    //       children: [
    //         {
    //           id: "3",
    //           category_name: "国际信息"
    //         }
    //       ]
    //     },
    //     {
    //       id: "2",
    //       category_name: "啦啦啦啦",
    //       children: [
    //         {
    //           id: "4",
    //           category_name: "呀呀呀"
    //         }
    //       ]
    //     }
    //   ],
    //   current: []
    // });
    const deleteId = ref(null);
    //#endregion

    /** === === === === === === method === === === === === ===*/
    //#region
    const clearFormInput = () => {
      submit_button_loading.value = false;
      refs.categoryForm.resetFields();
    };
    const submit = () => {
      if (submit_button_type.value === "category_first_add") {
        addFirstCategory();
      }
      if (submit_button_type.value === "category_first_edit") {
        editCategory();
      }
    };

    const addFirstCategory = () => {
      if (!form.categoryName) {
        return root.$message({
          message: "分类名称不能为空",
          type: "error"
        });
      }
      AddFirstCategory({ categoryName: form.categoryName })
        .then(data => {
          console.log("data:", data);
          root.$message({
            message: "添加成功",
            type: "successs"
          });
          // 更新界面
          // 方式一:
          // GetCategory()
          // 方式二:
          category.value.item.push(data);
          clearFormInput();
        })
        .catch(error => {
          clearFormInput();
        });
    };

    const addFirst = params => {
      submit_button_type.value = params.type;
      category_first.value = true;
      category_sec.value = false;
      category_first_disabled.value = false;
      submit_button_disabled.value = false;
    };

    const confirmDelete = () => {
      DeleteCategory({ id: deleteId.value })
        .then(data => {
          const index = category.value.item.findIndex(item => item.id === deleteId.value);
          console.log(index);
          category.value.item.splice(index, 1);
        })
        .catch(error => {});
    };

    const deleteCategory = id => {
      deleteId.value = id;
      confirm({
        content: "确认删除当前信息, 确认后将无法恢复!!",
        tip: "警告",
        fn: confirmDelete,
        catchFn: () => {
          deleteId.value = null;
        }
      });
    };

    const editCategory = params => {
      submit_button_type.value = params.level;
      category_sec.value = false;
      category_first_disabled.value = false;
      submit_button_disabled.value = false;
      form.categoryName = params.data.category_name;
      // 储存当前数据对象
      category.value.current = params.data;
    };
    const editFirstCategory = () => {
      if (category.current.length === 0) {
        return root.$message({
          message: "未选择分类",
          type: "error"
        });
      }
      const requestData = {
        id: category.value.current.id,
        categoryName: form.categoryName
      };
      EditCategory(requestData).then(data => {
        root.$message({
          message: "编辑成功!",
          type: "success"
        });
        const items = category.item.filter(item => item.id === category.value.current.id);
        items[0].category_name = data.categoryName;
        form.categoryName = "";
        category.value.current = [];
      });
    };
    //#endregion

    onMounted(() => {
      // GetCategory({})
      //   .then(data => {
      //     console.log("data:", data);
      //     category.value.item = data;
      //     clearFormInput();
      //   })
      //   .catch(() => {
      //     clearFormInput();
      //   });
      //TODO
    });

    return {
      form,
      category_first,
      category_sec,
      category,
      submit_button_loading,
      submit_button_disabled,
      category_first_disabled,
      category_sec_disabled,
      submit,
      addFirst,
      deleteCategory,
      editCategory
    };
  }
};
</script>

<style lang="scss" scoped>
.category-wrap {
  div:first-child {
    &:before {
      top: 30px;
    }
  }
  div:last-child {
    &:before {
      bottom: 23px;
    }
  }
}
.menu-title {
  line-height: 44px;
  padding-left: 22px;
  background-color: #f3f3f3;
}
.category {
  position: relative;
  line-height: 44px;
  cursor: pointer;
  &:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 32px;
    border-left: 1px dotted #000;
  }
  h4 {
    position: relative;
    padding-left: 40px;
    margin: 0;
  }
  svg {
    position: absolute;
    left: 15px;
    top: 15px;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  li {
    list-style: none;
    position: relative;
    padding-left: 36px;
    margin-left: 24px;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 20px;
      width: 32px;
      border-bottom: 1px dotted #000;
    }
  }
  li,
  h4 {
    transition: background-color 0.3s ease 0s;
    &:hover {
      background: #f3f3f3;
      .button-group {
        display: block;
      }
    }
  }
}
.button-group {
  display: none;
  position: absolute;
  z-index: 2;
  right: 11px;
  top: 0;
  button {
    font-size: 12px;
  }
}
.from-rap {
  width: 410px;
}
</style>
